<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1. 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <div id="root"></div>
    <script>
        console.log('React', React, ReactDOM)
        // 1.创建React元素
        /*
       * 三个API：
       * React.createElement(type代表元素的类型, 属性， 节点/子节点)
       */
        let title = React.createElement('h1',null,'你好React')
        // 2. 创建根节点
        let root = ReactDOM.createRoot(document.getElementById('root'))
        // 3.渲染元素到页面中
        root.render(title)
        // 4.虚拟Dom->普通对象
        console.log('VDOM', title);
        console.log('TDOM', document.getElementById('root'));
        // 判断数据的类型
        let arr = [] 
        console.log('title-typeof', typeof title, typeof arr)
        console.log('title-instanceof', title instanceof Object )
        console.log('arr-instanceof', arr instanceof Object && arr instanceof Array )
    </script>
</head>
<body>
    
</body>
</html>